<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <base href="${request.contextPath}/"/>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimum-scale=1.0">
    <title>漠河智慧社区</title>
    <style>
        .link_button {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 1px #20538D;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            background: #4479BA;
            color: #FFF;
            /*padding: 8px 12px;*/
            text-decoration: none;

            display:block;
            width:32px;
            height:20px;
            font-size: 15px;
            /*border:1px solid #000;*/

        }

    </style>
    <!--选项卡-->
    <link rel="stylesheet" href="Content/wechat/css/element.min.css">
    <link href="Content/wechat/css/shengHuo_QCSJ.css" rel="stylesheet" type="text/css">
    <!--end选项卡-->
    <link href="Content/wechat/css/reset.css" rel="stylesheet" type="text/css">
    <!--  <link href="css/index.css" rel="stylesheet" type="text/css">-->
    <link href="Content/wechat/css/ding.css" rel="stylesheet" type="text/css">

    <script src="Content/wechat/js/jquery.min.js"></script>
    <!--页码-->
    <link href="Content/wechat/css/myPagination.css" rel="stylesheet" type="text/css">
    <!--字体缩放-->
    <script src="Content/wechat/js/ziti.js"></script>
    <!--end 字体缩放-->
    <!--页码js-->
    <script src="Content/wechat/js/myPagination.js"></script>
</head>
<body>
<div id="myVue"     style="margin-left:10px;">
<!--    <h5>${openid}</h5>-->
    <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待领取" name="second">
                <div class="qyml clearfix" id="htmlBoxOne">
                </div>
            </el-tab-pane>
            <el-tab-pane label="进行中" name="third">
                <div class="qyml clearfix" id="htmlBoxTwo">
                    /**/
                </div>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="fourth">
                <div class="qyml clearfix" id="htmlBoxthree">

<!--                    <div class="qyml_l">-->
<!--                        <div class="qyml_l_img">-->
<!--                            <img src="Content/wechat/images/sq.jpg">-->
<!--                        </div>-->
<!--                        <div class="qyml_l_wenzi">-->
<!--                            <h3>漠河北区公安局4</h3>-->
<!--                            <p>123分</p>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>
            </el-tab-pane>
        </el-tabs>
    </template>
    </div>
<!--js选项卡-->
<script type="text/javascript" src="Content/wechat/js/vue.min.js"></script>
<script src="Content/wechat/js/element.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#myVue',
        data() {
        return {
            activeName: 'second',
            activeName2: 'first',
            tabPosition: 'top',
            editableTabsValue2: '2',
            editableTabs2: [{
                title: 'Tab 1',
                name: '1',
                content: 'Tab 1 content'
            }, {
                title: 'Tab 2',
                name: '2',
                content: 'Tab 2 content'
            }],
            tabIndex: 2
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        addTab(targetName) {
            let newTabName = ++this.tabIndex + '';
            this.editableTabs2.push({
                title: 'New Tab',
                name: newTabName,
                content: 'New Tab content'
            });
            this.editableTabsValue2 = newTabName;
        },
        removeTab(targetName) {
            let tabs = this.editableTabs2;
            let activeName = this.editableTabsValue2;
            if(activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if(tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if(nextTab) {
                        activeName = nextTab.name;
                    }
                }
            });
        }

        this.editableTabsValue2 = activeName;
        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
    }
    }
    })
</script>
</body>
<script>

    var oid = '${openid}';
    // alert(oid);

    var pageSize = 10000;    //一页显示几个
    window.onload = function () {
        // InitAllAjax(1);
        InitZeroAjax(1);
        InitOneAjax(1);
        InitTwoAjax(1);
    }



    // function InitAllAjax(pageNum) {
    //     $.ajax({
    //         url: "/wechat/personage/GetRecordList",
    //         type: 'post',
    //         dataType: 'json',
    //         data: {
    //             pagination: "{page:\"" + pageNum + "\",rows:\"" + pageSize + "\",sidx:\"\",sord:\"\"}",
    //             status: ""
    //         }, success: function (result) {
    //            ajaxCallBack(result,"htmlBoxAll");
    //         }
    //
    //     })
    // }


    // function InitOneAjax(pageNum) {
    //     $.ajax({
    //         url: "/wechat/personage/collection/GetRecordList",
    //         type: 'post',
    //         dataType: 'json',
    //         data: {
    //             pagination: "{page:\"" + pageNum + "\",rows:\"" + pageSize + "\",sidx:\"\",sord:\"\"}",
    //             status: ""
    //         }, success: function (result) {
    //             ajaxCallBack(result,"htmlBoxOne");
    //         }
    //
    //     })
    // }

    function InitOneAjax(pageNum) {
        // alert(oid);
        $.ajax({
            url: "/wechat/home/volunteer/mission/list1",
            type: 'post',
            dataType: 'json',
            data: {
                pagination: "{page:\"" + pageNum + "\",rows:\"" + pageSize + "\",sidx:\"\",sord:\"\"}",
                status: "1",
                openid:oid
            }, success: function (result) {
                ajaxCallBackzero(result,"htmlBoxOne");
            }

        })
    }

    function InitTwoAjax(pageNum) {
        $.ajax({
            url: "/wechat/home/volunteer/mission/list2",
            type: 'post',
            dataType: 'json',
            data: {
                pagination: "{page:\"" + pageNum + "\",rows:\"" + pageSize + "\",sidx:\"\",sord:\"\"}",
                status: "2"
            }, success: function (result) {
                ajaxCallBackone(result,"htmlBoxTwo");
            }

        })
    }

    function InitZeroAjax(pageNum) {
        $.ajax({
            url: "/wechat/home/volunteer/mission/list3",
            type: 'post',
            dataType: 'json',
            data: {
                pagination: "{page:\"" + pageNum + "\",rows:\"" + pageSize + "\",sidx:\"\",sord:\"\"}",
                status: "3"
            }, success: function (result) {
                ajaxCallBackthree(result,"htmlBoxthree");
            }

        })
    }

    function ajaxCallBackthree(data,id) {
        var insetViewData = ""; //视图数据
        $.each(data.data.rows, function (index, items) {
            // alert(items.award);
            var title ="";
            if (items.title != null){
                if(items.title.length>15){
                    title = items.title.substring(0,15)+"..."
                }else {
                    title = items.title;
                }
            }
            insetViewData += "<div class=\"qyml_l\">\n" +
                "                        <div class=\"qyml_l_wenzi\"  onclick=\"window.location.href='/wechat/home/volunteer/mission/mission_info?id="+items.ayid+"'\">\n" +
                "                            <h3>"+title+"</h3>\n" +
                "                            <p>"+items.award+"币</p>\n" +
                "                        </div>\n" +
                "                    </div>";

        });
        $("#"+id).html(insetViewData);
    }

    function ajaxCallBackone(data,id) {
        var insetViewData = ""; //视图数据
        $.each(data.data.rows, function (index, items) {
            var title ="";
            if (items.title != null){
                if(items.title.length>15){
                    title = items.title.substring(0,15)+"..."
                }else {
                    title = items.title;
                }
            }
            insetViewData += "<div class=\"qyml_l\">\n" +
                "                        <div class=\"qyml_l_wenzi\"  onclick=\"window.location.href='/wechat/home/volunteer/mission/mission_info?id="+items.ayid+"'\">\n" +
                "                            <h3>"+title+"</h3>\n" +
                "                            <p>"+items.award+"币</p>\n" +
                "                        </div>\n" +
                "                    </div>";

        });
        $("#"+id).html(insetViewData);
    }

    function ajaxCallBackzero(data,id) {
        var insetViewData = ""; //视图数据
        // alert(oid);
        $.each(data.data.rows, function (index, items) {
            var title ="";
            // alert(items.award);
            // alert('111'+title);
            // alert(items.id);
            if (items.title != null){
                if(items.title.length>15){
                    title = items.title.substring(0,15)+"..."
                }else {
                    title = items.title;
                }
            }
            insetViewData +=  "<div class=\"qyml_l\">\n" +
                "                        <div class=\"qyml_l_wenzi\" onclick=\"window.location.href='/wechat/home/volunteer/mission/mission_infoto?id="+items.id+"&title="+items.title+"&openid="+oid+"&award="+items.award+"&ayid="+items.id+"'\">\n"+
                "                            <h3>"+title+"</h3>\n"+
                "                            <p>"+items.award+"币</p>\n"+
                // "                       <a href='/wechat/home/volunteer/mission/receive?title="+items.title+"&openid="+oid+"&award="+items.award+"&ayid="+items.id+"' class=\"link_button\">领取</a>\n"+
                "                        </div>\n" +
                "                    </div>";

        });
        $("#"+id).html(insetViewData);
    }
</script>
</html>
